<template>
    <div class="Sideheader">
        <div class="header-left">
            <img class="header-left__img" :src="userinfo.headimgurl" alt="">
        </div>

        <div class="header-right">
            <p class="header-right__name">{{userinfo.nickname}}</p>
            <div class="header-right__status">
                <flexbox :gutter="0">
                    <flexbox-item>
                        <div class="header-right__flex">
                            <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.38rem;height:.38rem;vertical-align:-0.08rem">
                                <use :xlink:href="this.weixin === 1?'#icon-z-weixin2-copy-copy':'#icon-z-weixin2-copy'"></use>
                            </svg>
                            <div class="header-right__information">
                                <div class="header-right__scale">微信关注</div>
                            </div>
                            
                        </div>
                    </flexbox-item>
                    <flexbox-item>
                        <div class="header-right__flex">
                            <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.38rem;height:.38rem;vertical-align:-0.08rem">
                                <use :xlink:href="this.weixin === 1?'#icon-shouji-copy':'#icon-shouji'"></use>
                            </svg>
                            <div class="header-right__information">
                                <div class="header-right__scale">手机认证</div>
                            </div>
                            
                        </div>
                    </flexbox-item>
                    <flexbox-item>
                        <div class="header-right__flex">
                            <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.38rem;height:.38rem;vertical-align:-0.08rem">
                                <use :xlink:href="this.realname === 1?'#icon-shimingrenzheng-copy':'#icon-shimingrenzheng'"></use>
                            </svg>
                            <div class="header-right__information">
                                <div class="header-right__scale">实名认证</div>
                            </div>
                            
                        </div>
                    </flexbox-item>
                    <flexbox-item>
                        <div class="header-right__flex">
                            <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.38rem;height:.38rem;vertical-align:-0.08rem">
                                <use :xlink:href="this.email === 1?'#icon-youjianxinjian-copy':'#icon-youjianxinjian'"></use>
                            </svg>
                            <div class="header-right__information">
                                <div class="header-right__scale">邮箱认证</div>
                            </div>
                            
                        </div>
                    </flexbox-item>
                    <flexbox-item>
                        <div class="header-right__flex">
                            <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.38rem;height:.38rem;vertical-align:-0.08rem">
                                <use :xlink:href="this.vip === 1?'#icon-vip-copy':'#icon-vip'"></use>
                            </svg>
                            <div class="header-right__information">
                                <div class="header-right__scale">VIP会员</div>
                            </div>
                            
                        </div>
                    </flexbox-item>
                </flexbox>
            </div>
        </div>
    </div>
</template>

<script>
import { Flexbox, FlexboxItem } from 'vux'
export default {
    name: 'SideBarHome',
    components: {
        Flexbox,
        FlexboxItem
    },
    props: {
        userinfos: Object,
        // img: {
        //     default () {
        //         return 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=747467622,4011869909&fm=58&bpow=460&bpoh=460'
        //     }
        // },
        // name: {
        //    default () {
        //         return '尤雨溪'
        //     } 
        // },
        weixin: {
            default () {
                return 1
            }
        },
        phone: {
            default () {
                return 1
            }
        },
        realname: {
            default () {
                return 1
            }
        },
        email: {
            default () {
                return 1
            }
        },
        vip: {
            default () {
                return 0
            }
        }
    },
    data () {
        return {
            userinfo : this.userinfos
        }
    },
    mounted () {
        // console.log(userinfo)
    }
}
</script>

<style lang="stylus" scoped>
.Sideheader
    background-color: #ffe0d2
    padding: .3rem .26rem
    overflow: hidden
    display: flex
    margin-bottom: .25rem
    .header-left
        float: left
        width: 1.43rem
        height: 1.43rem
        border-radius: .3rem
        overflow: hidden
        margin-right: .3rem
        .header-left__img
            width: 100%
            height: 100%
    .header-right
        flex: 1
        .header-right__name
            padding-top: .1rem
            font-size: .4rem
            font-weight: bold
            margin-bottom: .26rem
        .header-right__status
            .header-right__flex
                text-align: center
                font-size: .12rem
                .header-right__information
                    width: 130%
                    margin-left: -.1rem
                    .header-right__scale
                        transform: scale(0.6);
</style>